// 取值 =>从上一个页面传过来值
// /iframe/article/publisher/publisher.html?id=100
// 如何取 ? 
// let Id = 100 
// 页面通讯  => 本地存储  url传值
// location.search  当前url 携带? 和 ?后面拼接
// "?id=31093" 

// "?id=31093"  =>  31093
let Id = location.search.substring(4) // 文章id

const handleId = () =>{
  if (Id) {
    // 通过接口=> 请求=> 
    getArticleDetailById(Id, res => {
      console.log(res);
      const data = res.data.data
      // debugger
      // 通过laiyu form 快速赋值
      form.val('edit', data)
      
      // (1): 下拉菜单的选择问题
      // =========
      layui.form.render('select', 'edit');
      // (2): 让裁剪插件也替换一下
      // =====warining====== 
      cropper.replace('http://api-breakingnews-web.itheima.net'+ data.cover_img);
      // 127.0.0.1:5500 =>是本地启动的服务 => 没有对应的图片  = > /uploads/upload_f1b19d7e481b8911b23bc9b 
      // http://api-breakingnews-web.itheima.net 请求地址 
      // 需要来服务器里找 =>  图片都保存在服务器里了 => 服务器的根路径 + /uploads/upload_f1b19d7e481b8911b23bc9b 
    })
  }
}

// console.log(Id); // 31093
// debugger
// 发布页面的js代码
// 获取文章分类
getArticleCates(res => {
  // console.log(res);
  const data = res.data.data
  // 拿到数据 => 遍历 =>创建标签 =>添加到对应的容器
  data.forEach(item => {
    let optStr = `<option value="${item.Id}" lay-verify="cate">${item.name}</option>`
    // select + option 
    $('select[name=cate_id]').append(optStr)
    // 因为数据是动态渲染的 => form.render()
    form.render('select', 'edit')
    // select + option 需要在标签创建好了之后,再次form.val('edit', data)
    // 如果不是这样的请求顺序 => 通过id 拿到文章的所有信息 = > cate_id = > 
    // option 没有 
  });
  handleId()

})


// 如果是编辑文章页面过来的,就会有id的值


// 富文本编辑器  => 后台管理系统 = > tinyMCE => 国外的开源的项目 => cEditor => wangEditor  
// 调用tinyMCE 的富文本编辑器
initEditor()





// 注册表单事件
$('.layui-form').on('submit', e => {
  e.preventDefault()
  // 富文本里的东西取出(唯一的用activeEditor)
  let htmlStr = tinyMCE.activeEditor.getContent();
  // 把封面图片的裁剪区域提取出来
  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100
  });
  // console.log(htmlStr);
  // 将canvas转化成blob 二进制的数据
  canvas.toBlob(function (blobObj) {
    // console.log(blobObj);

    // 发布新文章
    // 
    let fd = new FormData($('.layui-form')[0])
    // set(设置值)
    //  append(新增)
    // 将富文本的值 更新到fd里面
    fd.set('content', htmlStr)
    // 将上传的图片blob => 添加到fd里面
    fd.append('cover_img', blobObj)
    fd.forEach((v, i) => {
      console.log(v, i);
    });

    // 当前发布和编辑都会跳转到这个页面
    // 在某个地方做处理=>单独处理
    // 发布的接口单独写
    // 编辑的接口也需要单独写



    // 拿到列表页面传过来的id => 

    // 如果在当前页面获取文章id =>存在的话就是编辑,不存在发布
    // =======TODO编辑文章 需要id ======

    // 发表文章和编辑文章=>
    // 发表文章 => 将页面中input的值=> 发送接口请求就可以了
    // 编辑文章 => 文章id来去编辑 => id => 后台 当前编辑哪一篇文章 => 


    if (Id) {
      // 编辑文章
      fd.append('Id',Id)
      postArticleEdit(fd,res=>{
        setTimeout(() => {
          location.href = '../list/list.html'
        }, 1000);
      })
      // 编辑的接口 =>后台
    } else {
      // 发布文章接口
      postAddArticle(fd, res => {
        console.log('发布新文章成功了', res);
        // 跳转到文章列表页面
        // 添加定时器
        setTimeout(() => {
          location.href = '../list/list.html'
        }, 1000);
      })
    }
  })
})




// 3. 集成图片裁剪的插件
let cropper;
function initCropper() {
  // 1. 集成裁剪插件
  const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 横纵比例
    preview: $(".img-preview")
  });
}
initCropper();

// 选择图片
$('.select').on('click', () => {
  // // JS代码来主动触发input[type=file]的点击事件 - 选择文件的窗口就出来
  $("#file").click();
})


// 监听input的change事件
$("#file").on('change', e => {
  //为什么要转成blob对象
  // 需求:file => 渲染到页面上 => cropper.js插件 
  // 如果将图片显示到网页(cropper的内容区)上,人家接收的就是blob对象
  // file =>  url blob()
  // 用人家的插件=>要求你使用插件方法的时候 =>人家用什么=>需要转化成什么格式
  //拿到了图片信息
  let file = e.target.files[0]
  console.log(file);
  let url = URL.createObjectURL(file);
  console.log(url);
  // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
  cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper
})





//表单元素可能是动态插入的。
// 这时 form 模块 的自动化渲染是会对其失效的。
// 因为layui  没有双向绑定机制（因为我们叫经典模块化框架） 
//你只需要执行 form.render(type, filter); 方法即可。

// 扩展
// 双向绑定机制 
// vue => 双向绑定机制
// MVVM的框架
// M => Model  数据层
// V => View   视图层
// VM => Vue   视图模型
// 数据层 视图层
// 数据 和视图的关系
// 不需要操作dom  => 
// 关注v 和 m => m
// 文章标题 => 文章标题1
// JQ => 数据和视图
// 简化dom的操作 =>操作dom  =>html() val()

